<!--
 * @description: 
 * @Author: Islands
 * @Date: 2024-06-17 22:56:40
 * @LastEditTime: 2024-06-21 16:17:40
-->
<script lang="ts" setup>
import MenuItem from './menu-item.vue';
import { props } from '../props';
const { collapse, menuList, activePath } = defineProps(props);
</script>
<template>
    <el-menu class="custom-menu" :default-active="activePath" :collapse="collapse" background-color="none" active-text-color="var(--ep-color-primary)" text-color="#fff" unique-opened router>
        <slot />
        <menu-item :menu-list="menuList" />
    </el-menu>
</template>
<style lang="scss" scoped>
.custom-menu {
    border-right: 0;
    height: inherit;
}
:deep(.ep-sub-menu) {
    display: grid;
    padding: 5px;
    .ep-sub-menu__title,
    .ep-menu-item {
        height: 42px;
    }
    .ep-sub-menu__title:hover,
    .ep-menu-item:hover,
    .ep-sub-menu__title.is-active,
    .ep-menu-item.is-active {
        color: var(--ep-color-primary);
        text-shadow: none;
        position: relative;
        border-radius: 15px;
        transition: 0.3s all;
        //background-color: var(--ep-color-hover-primary);
    }
    .ep-sub-menu__title:hover,
    .ep-menu-item:hover {
        background-color: var(--ep-color-hover-primary);
    }
}

//父子联动
:deep(.ep-sub-menu.is-active > .ep-sub-menu__title) {
    color: var(--ep-color-primary) !important;
}
//父子上下间距,同级上下间距
// :deep(.ep-sub-menu__title) {
//     margin-bottom: 3px;
// }
// :deep(.ep-menu-item) {
//     margin-bottom: 3px;
// }
</style>
